<template>
  <el-container style="padding: 20px;">
    <el-aside width="200px">
      <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleSelect">
        <el-menu-item index="1"><i class="el-icon-document"></i> 订单信息</el-menu-item>
        <el-menu-item index="2"><i class="el-icon-location"></i> 收货地址</el-menu-item>
        <el-menu-item index="3"><i class="el-icon-user"></i> 个人资料</el-menu-item>
      </el-menu>
    </el-aside>

    <el-main>
      <div v-if="activeIndex === '1'">
        <h2>订单信息</h2>
        <el-table :data="orderData">
          <el-table-column prop="orderNumber" label="订单号" />
          <el-table-column prop="date" label="日期" />
          <el-table-column prop="status" label="状态" />
        </el-table>
      </div>

      <div v-if="activeIndex === '2'">
        <h2>收货地址</h2>
        <el-input placeholder="请输入收货地址"></el-input>
        <el-button type="primary" style="margin-top: 10px;">保存</el-button>
      </div>

      <div v-if="activeIndex === '3'">
        <h2>个人资料</h2>
        <el-form :model="profile">
          <el-form-item label="姓名">
            <el-input v-model="profile.name"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="profile.email"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="profile.phone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveProfile">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      orderData: [],
      profile: {
        name: "",
        email: "",
        phone: "",
      },
    };
  },
  mounted() {
    // 从localStorage加载订单信息
    const orders = JSON.parse(localStorage.getItem("orders")) || [];
    this.orderData = orders;
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
    },
    saveProfile() {
      // 保存个人资料的逻辑
      console.log("Profile saved:", this.profile);
    },
  },
};
</script>

<style>
.el-menu-vertical-demo {
  min-height: 500px;
}
</style>
